.tab-wrap {
  width: 50%;
  margin-left: 20%;
  position: relative;
  display: flex;
  top: -106px; }
  .tab-wrap label {
    cursor: pointer;
    color: rgba(255, 255, 255, 0.8);
    background-color: #00bcd4;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 56px;
    transition: color 0.2s ease;
    width: 100%; }
  .tab-wrap .slide {
    background: #ffeb3b;
    width: calc(100% / 4);
    height: 4px;
    position: absolute;
    left: 0;
    top: calc(100% - 4px);
    transition: left 0.3s ease-out; }
  .tab-wrap .tab-label-content {
    width: 100%; }
    .tab-wrap .tab-label-content .tab-content {
      position: absolute;
      top: 100px;
      left: 16px;
      line-height: 130%;
      display: none; }
  @media screen and (max-width: 800px) {
    .tab-wrap h1 {
      padding: 40px 0 90px 10%; }
    .tab-wrap .tab-wrap {
      width: 80%;
      margin-left: 10%;
      top: -106px; } }

input[type="radio"][name="tabs"] {
  position: absolute;
  z-index: -1; }
  input[type="radio"][name="tabs"]:checked + .tab-label-content label {
    color: white; }
  input[type="radio"][name="tabs"]:checked + .tab-label-content .tab-content {
    display: block; }
  input[type="radio"][name="tabs"]:nth-of-type(1):checked ~ .slide {
    left: calc((100% / 4) * 0); }
  input[type="radio"][name="tabs"]:nth-of-type(2):checked ~ .slide {
    left: calc((100% / 4) * 1); }
  input[type="radio"][name="tabs"]:nth-of-type(3):checked ~ .slide {
    left: calc((100% / 4) * 2); }
  input[type="radio"][name="tabs"]:nth-of-type(4):checked ~ .slide {
    left: calc((100% / 4) * 3); }
  input[type="radio"][name="tabs"]:first-of-type:checked ~ .slide {
    left: 0; }
